<template>
	<view class="xy-order-item br-10" @tap="onLink">
<!--    课程订单-->
		<view class="course" v-if="item.course_id">
      <view class="top">
        <view class="l"></view>
        <view class="r">
          {{item.status_text}}
          <text class="yz-iconfont yz-jiantou3 m-l-5"></text>
        </view>
      </view>
      <view class="p-20 flex just-sb">
        <view class="l">
          <image style="height: 135rpx;width: 202rpx;" :src="$xyfun.image(item.image)" class="br-10" />
        </view>
        <view class="m m-l-20 fx-grow">
          <view class="tb lh-40 ts-26">{{item.name}}</view>
        </view>
        <view class="r tr">
          <text>￥</text>
          <text class="ts-26">{{ item.price }}</text>
          <view class="m-l-auto">x{{ item.buy_num }}</view>
        </view>
      </view>
      <view class="other">
        <view class="l ts-24 flex ali-cen">
          订单号：{{item.order_sn}}
        </view>
        <view class="r ts-24">
          实际支付：<text class="tc-r tb ts-32">{{item.total_fee}}</text>
        </view>
      </view>
		</view>


<!--    商城订单-->
		<view class="goods" v-else-if="item.delivery_type">
      <view class="top">
        <view class="l">商品</view>
        <view class="r">
          {{item.status_text}}
          <text class="yz-iconfont yz-jiantou3 m-l-5"></text>
        </view>
      </view>
      <xyGoodsGrad :jump="false" :item="item"></xyGoodsGrad>
      <view class="other">
        <view class="l ts-24 flex ali-cen">
          订单号：{{item.order_sn}}
        </view>
        <view class="r ts-24">
          实际支付：<text class="tc-r tb ts-32">{{item.total_fee}}</text>
        </view>
      </view>
		</view>
		
	</view>
</template>
<script>
  import xyGoodsGrad from "@/components/xy-order/goods_grad"
  export default {
		name: "xyOrderItem",
    components: {
      xyGoodsGrad
    },
		props: {
			item: {
				type: Object,
			}
		},
		data() {
			return {

			};
		},
		methods: {
			async onLink(){
				if(this.item.course_id){
          //课程
          this.$xyfun.to('/pages/user/order/course_detail?id='+this.item.id);
        }else if(this.item.delivery_type){
          //商城
          this.$xyfun.to('/pages/user/order/detail?id='+this.item.id);
        }
			}
		}
	}
</script>
<style>
page{
  background: #ececec;
}
</style>
<style lang="scss">
	.xy-order-item{
    background: #fff;
    margin: 20rpx;
    .top{
      display: flex;
      justify-content: space-between;
      font-size: 26rpx;
      border-bottom: 1rpx solid #ececec;
      padding: 20rpx;
    }
    .other{
      display: flex;
      justify-content: space-between;
      padding: 14rpx 15rpx;
      border-top: 1rpx solid #f2f2f2;
    }
    .coupon{
      height: 134rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 202rpx;
      background: #FF5722;
      position: relative;
      border-radius: 12rpx;
      margin-right: 24rpx;
      color: #fff;
      font-weight: bold;
      letter-spacing: 4rpx;
      font-size: 30rpx;
      &:after{
        content: '';
        background: #fff;
        width: 40rpx;
        height: 40rpx;
        border-radius: 20rpx;
        left: -20rpx;
        position: absolute;
        box-shadow: 202rpx 0 0 #fff;
      }
    }
	}
</style>
